<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>谋刻职业教育在线测评与学习平台</title>
<script src="../../js/jquery-1.8.0.min.js"></script>
<script src="../../js/mine.js"></script>
<script src="../../js/jquery.tabs.js"></script>
  		<!-- video.js must be in the <head> for older IEs to work. -->
<link rel="stylesheet" href="../../video-js.css" >
<link rel="stylesheet" href="../../css/course.css"/>
<link rel="stylesheet" href="../../css/tab.css" media="screen">
    <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>


    <link href="summernote-0.8.16-dist/summernote.min.css" rel="stylesheet">
    <script src="summernote-0.8.16-dist/summernote.min.js"></script>

    <!-- include summernote-ko-KR -->
    <script src="summernote-0.8.16-dist/lang/summernote-zh-CN.js"></script>
<script src="../../js/video.js"></script>

      <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
      <script>
        videojs.options.flash.swf = "../../video-js.swf";

      </script>
      <script type="text/javascript">
$(function(){

	$('.demo2').Tabs({
		event:'click'
	});
});
</script>
      <style>
      body { overflow:hidden;
	  		 scrollbar-base-color:#fff;
			 scrollbar-arrow-color:#fff; /*三角箭头的颜色*/
			 scrollbar-face-color: #333; /*立体滚动条的颜色（包括箭头部分的背景色）*/
			 scrollbar-3dlight-color: #fff; /*立体滚动条亮边的颜色*/
			 scrollbar-highlight-color: #fff; /*滚动条的高亮颜色（左阴影？）*/
			 scrollbar-shadow-color: #fff; /*立体滚动条阴影的颜色*/
			 scrollbar-darkshadow-color:#fff; /*立体滚动条外阴影的颜色*/
			 scrollbar-track-color: #fff; /*立体滚动条背景颜色*/



	  }
	   /* 设置滚动条的样式 */
			::-webkit-scrollbar {
				width: 10px;
			}
			/* 滚动槽 */
			::-webkit-scrollbar-track {
				border-radius:0
			}
			/* 滚动条滑块 */
			::-webkit-scrollbar-thumb {
				background: #333;

			}
			::-webkit-scrollbar-thumb:window-inactive {
				background: rgba(255,0,0,0.4);
			}
      </style>
</head>

<body>
<div id="videos">
   <div class="linevideo" style="overflow-x:hidden">
    	<span class="returnindex"><a class="gray" href="coursecont1.html" style="font-size:14px;">返回课程</a></span>
        <span class="taskspan"><span class="ts"></span>&nbsp;&nbsp;<b class="tasktit">会计的概念与目标1{{vd}}</b></span>
        <div style="width:100%;margin-top:20px;">

			<video width="auto" ref="videoPlay" id="example_video_1" class="video-js vjs-default-skin  vjs-big-play-centered vvi " controls preload="none"  poster="images/c8.jpg" data-setup="{}"><!--poster是视频未播放前的展示图片-->
			<source  :src="vd" type='video/mp4' />

			</video>
			<p class="signp"><span class="sign">学过了</span><span class="nextcourse" title="下一课时">∨</span></p>

        </div>
    </div>

  <div class="interact">
   		<span class="ii" title="展开或收起">></span>
        <div class="clearh"></div>
        <!--<div class="coursmall">

        <img class="csimg" src="images/121.png" width="153" height="75">
        <span class="lineevalue">
        <p>计算机等级考试二级C语言</p>
            <p class="graytext"><img src="images/evaluate.png" width="71" height="14">(181份评价)</p>
            <p class="graytext">讲师：王老师</p>
            <p><a class="dowork" target="_blank" href="#">去做作业→</a></p>
         </span>
         <div class="clearh"></div>
        </div>-->

          <div class="box1 demo2">
			<ul class="tab_menu vmulu">
				<li class="current">目录</li>
				<li>笔记</li>
				<li>问答</li>
                <li>作业</li>
            </ul>
			<div class="tab_box tabcard">
				<div style="padding-bottom:30px;">
					<dl class="mulu noo1" v-for="item in course">
                        <dt>{{item.nodeName}}</dt>
                        <a @click="getvd(item1.resId)" v-for="item1 in item.children"><dd ><i class="forwa nn"></i><strong class="cataloglink">{{item1.nodeName}}</strong></dd></a><br>
                   </dl>
				   <div class="clearh"></div>
				</div>

				<div class="hide">
					<div style="padding-left:25px;">
                    <div class="c_eform" style="width:280px;margin-left:10px;">
                        <div class="clearh" ></div>
                        <button id="edit">编辑</button>
                        <button id="save">保存</button>
                        <button id="reset">重置</button>

                        <button id="getContent">带过来参数</button>
                        <form method="post">
                            <textarea id="summernote" name="editordata"></textarea>
                        </form>
                       <a href="#" class="fombtn">提交</a>
                       <div class="clearh"></div>
                    </div>
				</div>
				</div>
                <div class="hide">
					<div style="padding-left:15px;">
                    <div class="c_eform veform">
                    <div class="clearh" ></div>
                        <input class="inputitle pingjia_con" type="text"  value="请输入问题标题" onblur="if (this.value =='') this.value='请输入问题标题';this.className='inputitle pingjia_con'" onclick="if (this.value=='请输入问题标题') this.value='';this.className='inputitle pingjia_con_on'"/>
                        <textarea rows="7" class="pingjia_con" style="width:90%;"  onblur="if (this.value =='') this.value='请输入问题的详细内容';this.className='pingjia_con'" onclick="if (this.value=='请输入问题的详细内容') this.value='';this.className='pingjia_con_on'"></textarea><br/>
                       <a href="#" class="fombtn" style="margin-right:30px;">发布</a>
                       <div class="clearh"></div>
                    </div>
					<ul class="evalucourse" style="width:280px;">
                    	<li>
                        	<p class="vptext"><a target="_blank" class="peptitle" href="#">2013年国家公务员考试真题2013年国家公务员考试真题2013年国家公务员考试真题2013年?</a></p>         <p class="peptime pswer"><span style="float:left;"><b class="coclass">候候&nbsp;&nbsp;</b>发表于 2015-05-8 </span><span class="pepask" style="float:right;">回答(<strong style="color:#3eb0e0;"><a href="#" class="bluelink" target="_blank">10</a></strong>)&nbsp;&nbsp;&nbsp;&nbsp;浏览(<strong style="color:#3eb0e0;"><a href="#" class="bluelink" target="_blank">10</a></strong>)</span>
                            </p>
                        </li>
                        <li>
                        	<p class="vptext"><a target="_blank" class="peptitle" href="#">2013年国家公务员考试真题2013年国家公务员考试真题2013年国家公务员考试真题2013年?</a></p>         <p class="peptime pswer"><span style="float:left;"><b class="coclass">候候&nbsp;&nbsp;</b>发表于 2015-05-8 </span><span class="pepask" style="float:right;">回答(<strong style="color:#3eb0e0;"><a href="#" class="bluelink" target="_blank">10</a></strong>)&nbsp;&nbsp;&nbsp;&nbsp;浏览(<strong style="color:#3eb0e0;"><a href="#" class="bluelink" target="_blank">10</a></strong>)</span>
                            </p>
                        </li>
                    </ul>

				</div>
				</div>
				<div class="hide">
                    <div class="c_eform veform" style="margin-top:15px;margin-left:35px;">
					   <!--四种状态-->
					   <p>此课时暂无作业</p>
					   <p>共4道作业题<a href="homework.html" target="_blank"><span class="star_zy">继续做题</span></a></p>
					   <p>共4道作业题<a href="homework_jiexi.html" target="_blank"><span class="star_zy">查看解析</span></a></p>
					   <p>共4道作业题<a href="homework.html" target="_blank"><span class="star_zy">开始作业</span></a></p>
				</div>
				</div>
			</div>
		</div>
    </div>
</div>
</body>
<script src="../../js/vue.js"></script>
<script src="../../js/axios.min.js"></script>
<script src="../../js/moment.js"></script>
<script>
    new Vue({
        el:"#videos",
        data:{
            id:'',
            course:[],
            vd:""

        },
        methods:{
            gettree:function (id) {
                axios.get("/api/education-course/chapter/getTree/"+id).then(
                    (res)=>{
                            this.course=res.data.result;
                    }
                );
            },
            getvd:function (resId) {
                debugger;
                axios.get("/api/education-resouse/res/getvedio/"+resId).then(
                    (res)=>{
                        this.vd=res.data.result.resPath;
                        // 如果动态切换src地址，也要加上下面的事件（前提是src地址已切换或已重新赋值，再走这个事件）
                        this.$nextTick(() => {
                            this.$refs.videoPlay.load()
                        })
                    }
                );


            },

        },
        mounted(){
            var url = window.location.search;
            var id = url.split("=")[1];
            this.gettree(id);
        }
    });
</script>
<script>

    //初始化
    $('#summernote').summernote({
        lang: 'zh-CN',                 // default: 'en-US'
        height: 300,                 // set editor height
        minHeight: null,             // set minimum height of editor
        maxHeight: null,             // set maximum height of editor
        focus: true                  // set focus to editable area after initializing summernote
    });

    //保存数据
    $("#save").click(function () {
        console.log("save");
        var markupStr = $('#summernote').summernote('code');
        console.log(markupStr);

        //ajax上传代码
        var formData = new FormData();
        formData.append("contentDetail", markupStr);

        let params = {
            "contentDetail": markupStr,
            "sortNum": 0,
            "title": "这个是test"
        }
        $.ajax({
            type: 'post',
            url: "http://10.204.5.9:8070/atpdc-cms/article/addArticle", //上传文件的请求路径
            data: JSON.stringify(params),
            cache: false,
            processData: false,
            contentType: 'application/json; charset=utf-8'
        }).success(function (data) {
            console.log(data)
            if (data) {
                alert("成功: ")
            } else {
                alert("失败")
            }

        }).error(function () {
            alert("上传失败");
        });
    });

    //清空数据
    $("#reset").click(function () {
        console.log("reset");
        $('#summernote').summernote('code', "");
    });


    $("#getContent").click(function () {
        console.log("getContent");
        //这适合从后台带过来数据
        var markupStr = 'hello world';
        $('#summernote').summernote('code', markupStr);

    });


</script>
</html>
